// @ts-nocheck
import Footer from '@/components/Footer';
import {
  AlipayCircleOutlined,
  LockOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import {LoginForm, ProFormText,} from '@ant-design/pro-components';
import {Alert, message, Tabs} from 'antd';
import React, {useState} from 'react';
import {history} from '@umijs/max';
import styles from './index.less';
import {userRegister} from '@/services/CloudBridge-Service/userController';

const LoginMessage: React.FC<{ content: string; }> = ({content}) => {
  return (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );
};
const Register: React.FC = () => {
  const [type, setType] = useState<string>('register');

  const handleRegister = async (values: API.UserRegisterRequest) => {
    try {
      // 登录
      const res = await userRegister({
        ...values,
      });
      if (res.data) {
        message.success('注册成功');
        history.push('/user/login');
      }
    } catch (error) {
      if (error) {
        const mes = error?.message
        message.error(mes);
        return
      } else {
        const defaultLoginFailureMessage = '注册失败，请重试！';
        message.error(defaultLoginFailureMessage);
      }
    }
  };
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          logo={<img alt="logo" src="/logo.svg"/>}
          title="云桥接口"
          subTitle={'API 开放平台'}
          initialValues={{
            autoLogin: true,
          }}
          actions={[
            '其他登录方式 :',
            <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon}/>,
            <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon}/>,
            <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon}/>,
            <a style={{float: 'right'}} href="">
              Register
            </a>
          ]}
          onFinish={
            async (values) => {
              await handleRegister(values as API.UserRegisterRequest);
            }
          }
        >
          <Tabs
            activeKey={type}
            onChange={setType}
            centered
            items={[
              {
                key: 'register',
                label: '注册',
              },
            ]}
          />
          {status === 'error' && type === 'register' && (
            <LoginMessage content={'错误的用户名和密码(admin/ant.design)'}/>
          )}
          {type === 'register' && (
            <>
              <ProFormText
                name="userAccount"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={styles.prefixIcon}/>,
                }}
                placeholder={'用户名'}
                rules={[
                  {
                    required: true,
                    message: '用户名是必填项！',
                  },
                ]}
              />
              <ProFormText.Password
                name="userPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon}/>,
                }}
                placeholder={'密码'}
                rules={[
                  {
                    required: true,
                    validator: async (rule, value) => {
                      if (!value) {
                        return Promise.reject('密码是必填项！');
                      }
                      if (value.length < 8) {
                        return Promise.reject('密码不能少于 8 个字符！');
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              />
              <ProFormText.Password
                name="checkPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon}/>,
                }}
                placeholder={'密码'}
                rules={[
                  {
                    required: true,
                    message: '校验密码是必填项！',
                  },
                ]}
              />
            </>
          )}
        </LoginForm>
      </div>
      <Footer/>
    </div>
  );
};
export default Register;
